<template>
  <div>
    <!-- 顶部导航栏 --> 
    <van-nav-bar  :title="header" left-arrow @click-left="$router.go(-1)" />
      <div class="instructions">
          <div class="instruc-map">{{title}}</div>
          <div class="data">{{updateDate}}</div>
          <div class="title-city" v-html="content"></div>
      </div>
  </div>
</template>
<script>
import apiHttp from '../../../../../api/index'
 import { Toast } from 'vant';
export default {
    data(){
      return{
        id:this.$route.query.id ? this.$route.query.id: '',  // 判断页面是否存在id
        header:"详情",
        title:"",
        content:"",
        updateDate:"",
        timestamp:'',
        noncestr:'',
        signature:''
      }
    },
    beforeRouteEnter(to, from, next){
      if (to.path !== global.location.pathname) {
        location.assign(to.fullPath)
      } else{
        next()
      }  
    },
    methods:{
      addShareRecord(){
        let params = {
          userId: sessionStorage.getItem('userId'),
          articleId:this.id
        }
        apiHttp.comIndex.addShareRecord(params,resp=>{
          if(resp.resultCode == '000000'){
            Toast(resp.resultMsg)
          }else{
            Toast(resp.resultMsg)
          }
        })
      },   
      getSignature(){
        let params = {
          url:window.location.href
        }
        //获取签名
        apiHttp.apiIndex.getSignature(params,resp=>{
            this.timestamp = resp.timestamp
            this.noncestr =  resp.noncestr
            this.signature = resp.signature
            this.wxShare()
        })
      },
      wxShare(){
        let self = this
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: 'wx3ae18ee65c193eee', // 和获取Ticke的必须一样------必填，公众号的唯一标识
            timestamp:self.timestamp, // 必填，生成签名的时间戳
            nonceStr: self.noncestr, // 必填，生成签名的随机串
            signature:self.signature,// 必填，签名，见附录1
            jsApiList: [
                'onMenuShareAppMessage',
                'onMenuShareTimeline',
                'onMenuShareQQ',
                'onMenuShareQZone'
            ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        })
        this.ready()
      },
      ready(){ 
        let self = this
        let configs = {
          title:self.title, // 分享标题
          desc:self.title, // 分享描述
          link: window.location.href, // 分享链接
          imgUrl: 'http://132.232.16.61:8006/img/imgs/logo/logo.png', // 分享图标
          success: function () {
              // 用户确认分享后执行的回调函数、
              self.addShareRecord()
          },
          cancel: function () {
              // 用户取消分享后执行的回调函数
              //  Toast(222)
          }
        }
        wx.ready(function(){
          //----------“分享给朋友”
          wx.onMenuShareAppMessage(configs);
          // ------------"分享到朋友圈"
          wx.onMenuShareTimeline(configs);
          // //-------------分享到QQ
          wx.onMenuShareQQ(configs);
          //-------------分享到QQ空间
          wx.onMenuShareQZone(configs);
      
        })
        wx.error(function(res){
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            console.log(res);
        }); 
      },
      getArticleById(){
        let params ={
          articleId:this.id,
          userId:sessionStorage.getItem('userId'),
        }
        apiHttp.apiIndex.getArticleById(params,resp=>{
        if(resp.resultCode == '000000'){
            this.title=resp.data.article.title  
            this.content = resp.data.article.content
            this.updateDate=resp.data.article.updateDate  
          }else{
            Toast(resp.resultMsg)
          }
        })
      }
    },
    mounted: function(){
      this.getArticleById();
      this.getSignature()
    },
  }
</script>
<style scoped>
  .instructions{
    width: 90%;
    margin: 0 auto;
    margin-bottom: 1rem;
  }
  .instruc-map{
    text-align: center;
    color: #000000;
    font-size: 0.8rem;
    margin: 0.8rem 0 0.5rem 0;
  }
  .data{
    font-size: 0.7rem;
    color: #999999;
    margin-top: 0.2rem;
    line-height: 24px;
  }
  .title-city {
    font-size: 14px;
    line-height: 0.9rem;
  }
  .title-city  p .MsoNormal{
    font-size: 14px!important;
  }
  .title-city>>> div{
    font-size: 14px!important;
    line-height: 0.9rem!important;
  }  
</style>
